<template>
  <div class="electronicAcademic" id="nav-bar">
    <van-nav-bar :title="title" left-arrow @click-left="$router.go(-1)" />
    <van-search
      v-model="keyWord"
      @search="refreshList"
      @clear="refreshList"
      placeholder="请输入搜索关键词"
    />
    <div class="particulars">
      <ul>
        <li
          :style="{ background: colors[index % 3] }"
          v-for="(itme, index) of dataList"
          :key="index"
          @click="check(itme)"
        >
          {{ itme.printType }}
        </li>
        <li v-show="show" style="background: #229bf7" @click="more">更多</li>
      </ul>
      <p v-if="dataList.length == 0">暂无数据</p>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      title: "",
      fileProperty: "0",
      show: false,
      keyWord: "",
      dataList: [],
      colors: ["#26d3dc", "#ff9a6c", "#229bf7"],
      typeMap: {
        cjd: 0,
        zm: 1,
      },
    };
  },
  created() {
    const { type } = this.$route.query;
    this.fileProperty = this.typeMap[type];
    this.refreshList();
    // this.$store.commit(`app/${this.$types.REMOVE_CACHE_ROUTES}`,'previewFile');
  },
  methods: {
    more() {
      this.$router.push(
        "/pageList/achievement?fileProperty=" + this.fileProperty
      );
    },
    //获取数据
    refreshList() {
      this.$toast.loading({
        message: "加载中...",
        mask: true,
      });
      this.$http({
        url: "/private-xm/electronicDocument/printType",
        method: "post",
        data: {
          fileProperty: this.fileProperty,
          printType: this.keyWord,
        },
      })
        .then((res) => {
          this.$toast.clear();
          this.$store.commit(`app/${this.$types.SET_SVMODEL}`, res.svMode);
          if (this.fileProperty === 0) {
            this.title = "电子成绩单";
          } else {
            this.title = "电子证明";
          }
          this.show = res.data.length > 8;
          this.dataList = res.data.slice(0, 8);
        })
        .catch((error) => {
          this.$toast.clear();
          this.$toast(error);
        });
    },
    //查看成绩单
    check(item) {
      this.$store.commit(`app/${this.$types.SET_CURRENT_FILE}`, item);
      this.$store.commit(`app/${this.$types.SET_CACHE_ROUTES}`, "previewFile");
      this.$router.push(
        `/pageList/preview?vcid=${item.vcPrintTypeId}&fileProperty=${this.fileProperty}`
      );
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/styles/variable.scss";
#nav-bar ::v-deep .van-nav-bar__title {
  // color: #fff;
  font-size: 0.506667rem /* 19/37.5 */;
}
.electronicAcademic {
  position: relative;
  .van-nav-bar {
    background: none;
  }
  .van-nav-bar__title {
    font-weight: 600;
    color: #fff;
  }
  .van-nav-bar .van-icon {
    color: #111;
  }
  .van-hairline--bottom::after {
    border-bottom-width: 0;
  }

  .particulars {
    display: flex;
    position: absolute;
    top: 2.706667rem /* 101.5/37.5 */;
    ul {
      text-align: center;
      display: flex;
      flex-flow: wrap;
    }
    li {
      width: 2.8rem /* 105/37.5 */;
      height: 2.8rem /* 105/37.5 */;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      border-radius: 0.16rem /* 6/37.5 */;
      background: url("../../assets/images/pageList/bg.png") no-repeat;
      background-size: 100%;
      margin-left: 0.426667rem /* 16/37.5 */;
      margin-bottom: 1rem /* 37.5/37.5 */;
      font-size: 0.373333rem + $fontsize /* 14/37.5 */;
      padding: 0.32rem /* 12/37.5 */;
      box-sizing: border-box;
    }
  }

  li:last-child {
    font-size: 0.613333rem + $fontsize /* 23/37.5 */;
  }

  li:nth-child(8) {
    font-size: 0.293333rem + $fontsize /* 11/37.5 */;
  }
  p {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.533333rem + $fontsize /* 20/37.5 */;
  }
}
</style>
